import React, {Component} from 'react';
import {Button, Row, Col, Form, Input, Table, Modal, Select, Pagination} from 'antd';
import {logistics, roleAssignment} from "../value";
import app from '../AppMethod';
import {Consumer} from "../store";

const FormItem = Form.Item;
const Option = Select.Option;

class EmployeeManage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            data: [],
            pagination: {
                current: 0,
                total: 0,
                pagination: 0
            },
            allPage: 0,
            searchData: {},
            editVisible: false,
            addConfirmLoading: false,
        }
    };

    formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 12},
    };
    columns = [
        {
            title: '手机号',
            dataIndex: 'employee_phone'
        },
        {
            title: '姓名',
            dataIndex: 'employee_name'
        },
        {
            title: '微信昵称',
            dataIndex: 'employee_nickname'
        },
        {
            title: '操作',
            dataIndex: this.columns,
            render: data => {
                let openId = data.employee_open_id;
                let isShow = false;
                if (openId != null && openId.length >= 0) {
                    isShow = true;
                }
                return (
                    isShow === true ? <span style={{color: '#1890ff', cursor: 'pointer'}}
                                            onClick={() => this.handleUntieWechat(data.employee_id)}>解绑微信</span> :
                        <span></span>
                )
            }
        }
    ];

    render() {
        return (
            <div>
                <Row>
                    <SearchLists
                        clickSearch={(value) => {
                            this.handleGetSearch(value)
                        }}
                        handleReset={() => {
                            this.handleReset()
                        }}
                    >
                    </SearchLists>
                </Row>
                <Row style={{marginTop: '20px'}}>
                    <Col span={24}>
                        <Table
                            columns={this.columns}
                            rowKey={record => record.employee_id}
                            dataSource={this.state.data}
                            pagination={false}
                            loading={this.state.loading}
                        />
                    </Col>
                </Row>
                <Row style={{marginTop: '20px'}}>
                    <Col span={12} style={{fontSize: '15px'}}>
                        共 {this.state.pagination.total} 条记录 第 {this.state.pagination.current} / {this.state.allPage}
                        页
                    </Col>
                    <Col span={12} style={{textAlign: 'right'}}>
                        <Pagination {...this.state.pagination} showSizeChanger={true} showQuickJumper={true}
                                    onChange={(page, pageSize) => this.handlePageChange(page, pageSize)}
                                    onShowSizeChange={(current, size) => this.handleSizeChange(current, size)}
                                    hideOnSinglePage={false}/>
                    </Col>
                </Row>
            </div>
        )
    };

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch({menuType: "员工管理"});
        this.handleGetCustomerList();
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    };

    /**
     * 根据条件处理查询员工列表功能
     * @param value
     */
    handleGetSearch(value) {
        this.setState({searchData: value});
        let data = {
            page: 1,
            size: this.state.pagination.pageSize || 10,
            employee_name: value.employee_name,
            employee_phone: value.employee_phone,

        };
        this.handleGetCustomerList(data);
    };

    /**
     * 处理分页跳转事件
     * @param page
     * @param size
     */
    handlePageChange(page, size) {
        let data = this.state.searchData;
        data.page = page;
        data.size = size;
        this.handleGetCustomerList(data);
    };

    /**
     * 处理页数变化事件
     * @param current
     * @param size
     */
    handleSizeChange(current, size) {
        let data = this.state.searchData;
        data.page = current;
        data.size = size;
        this.handleGetCustomerList(data);
    };

    /**
     * 获取员工列表事件
     * @param data
     */
    handleGetCustomerList(data = {page: 1, size: 10, employee_name: '', employee_phone: ''}) {
        this.setState({loading: true});
        app.post(roleAssignment.SEARCH_EMPLOYEELIST, data).then((result) => {
            if (result.code === 1) {
                let count = result.data.count;
                let pagination = {
                    current: data.page,
                    pageSize: data.size,
                    total: count
                };
                let allPage;
                if (count % data.size > 0) {
                    allPage = parseInt(count / data.size) + 1;
                } else {
                    allPage = count / data.size;
                }
                let customerData = result.data.dataSet;
                console.log(customerData);
                this.setState({
                    pagination,
                    loading: false,
                    data: customerData,
                    allPage
                })
            } else {
                let pagination = {
                    current: 0,
                    pageSize: 0,
                    total: 0
                };
                let allPage = 0;
                this.setState({loading: false, data: [], pagination, allPage});
                app.alert(result.msg, 'error', 3);
            }
        })
    };

    /**
     * 处理重置功能
     */
    handleReset() {
        this.setState(({searchData: {}}));
        this.handleGetCustomerList();
    };

    /**
     * 处理解绑微信事件
     * @param id
     */
    handleUntieWechat(id) {
        app.post(roleAssignment.UNTIEWECHAT, {employee_id: id}).then((result) => {
            if (result.code === 1) {
                app.alert("解绑成功！", 'success', 3);
                this.handleAfterUntie();
            } else {
                app.alert('解绑失败！', 'error', 3);
            }
        })
    };

    /**
     * 处理解绑后查询员工列表事件
     */
    handleAfterUntie() {
        let data = this.state.searchData;
        data.page = this.state.pagination.current ? this.state.pagination.current : 1;
        data.size = this.state.pagination.pageSize ? this.state.pagination.pageSize : 10;
        this.handleGetCustomerList(data);
    }
};

class SearchList extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    };

    formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 12},
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div>
                <Row>
                    <Form className="login-form">
                        <Col span={6}>
                            <FormItem label="姓名" {...this.formItemLayout}>
                                {
                                    getFieldDecorator('employee_name')(
                                        <Input type="text" placeholder="请输入"
                                               onPressEnter={() => this.handleOnPressEnter()}/>
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col span={6}>
                            <FormItem label="手机号" {...this.formItemLayout}>
                                {
                                    getFieldDecorator('employee_phone')(
                                        <Input type="text" placeholder="请输入"
                                               onPressEnter={() => this.handleOnPressEnter()}/>
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col offset={6} span={6} style={{float: 'right'}}>
                            <Button type="primary"
                                    onClick={() => this.handleSearchComplain()}
                            >
                                查询
                            </Button>
                            <Button type="default"
                                    onClick={() => this.handleReset()}
                                    style={{marginLeft: '10px'}}
                            >
                                重置
                            </Button>
                        </Col>
                    </Form>
                </Row>
            </div>
        )
    };

    componentDidMount() {

    };

    /**
     * 获取查询条件
     */
    handleSearchComplain() {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.clickSearch(values);
            }
        })
    };

    /**
     * 处理重置按钮事件
     */
    handleReset() {
        this.props.form.resetFields();
        this.props.handleReset();
    };

    /**
     * 处理输入框按下回车键的事件
     */
    handleOnPressEnter() {
        //调用获取搜索条件的函数
        this.handleSearchComplain();
    };
};

const SearchLists = Form.create()(SearchList);
const EmployeeManages = Form.create()(EmployeeManage);
export default prop => (
    <Consumer>
        {
            props => (
                <EmployeeManages {...prop} {...props}/>
            )
        }
    </Consumer>
);